<template>
    <div>
      <div class="searchBox">
        <input type="text" v-model="searchStr" class="ipt">
        <button @click="clickSearch" class="btn">搜索</button>
      </div>
      <div class="panel hotsongs on">
        <ul class="list">
          <router-link
            class="song url"
            tag="li"
            :to="{
              name:'Player',
              params:{songid:item.songid} }"
            v-for="(item,index) in song_list.song"
            :key="index"
          >
            <div class="poster">
              <img v-if="song_list.album[index]" :src="song_list.album[index].artistpic" :alt="song_list.album[index].artistpic">
            </div>
            <div class="info">
              <div class="name">{{ item.songname }}</div>
              <div class="author">{{ item.artistname }}</div>
            </div>
          </router-link>
        </ul>
      </div>
    </div>
</template>

<script>
  import api from "../../api/base";
    export default {
        name: "Search",
      data(){
          return{
            searchStr:'',
            song_list:{}
          }
      },
      created(){

      },
      methods:{
        clickSearch(){
          api.getMusicList({
            method:'baidu.ting.search.catalogSug',
            query:this.searchStr
          })
          .then(res=>{
            console.log(res.data);
            this.song_list = res.data
          })
        }
      }
    }
</script>

<style scoped>
  .searchBox{
    height: 50px;
    line-height: 50px;
  }
  .searchBox .ipt{
    border-radius: 20px;
    width: 70%;
    background-color: #fff;
    margin-left: 20px;
    padding-left: 20px;


  }
  .searchBox .btn{
    width: 10%;
    height: 50%;
    margin-left: 15px;
    /*border: 1px solid red;*/

  }


  .tabs {
    padding: 10px;
    background: #fff;
  }
  .musictop {
    background: #fff;
    padding: 10px;
  }

  .panel {
    border-top: 1px solid #eee;
    position: relative;
    top: -1px;
    display: block;
    background: #fff;
  }

  /*.list {*/
  /*  padding-top: 0;*/
  /*  height: 375px;*/
  /*}*/

  .panel .list li {
    height: 60px;
    border-bottom: 1px solid #eee;
    padding-left: 0;
    display: flex;
    padding-top: 10px;
  }

  .panel .list li .poster {
    position: relative;
    width: 45px;
    margin-right: 8px;
  }

  .panel .list li .poster img {
    border: 1px solid #eee;
  }
  .info {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .info .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    color: #333;
  }

  .info .author {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #999;
    margin-top: 2px;
  }

  .more-songs {
    color: #999;
    margin-top: 9px;
    font-size: 12px;
    text-align: center;
    height: 32px;
    line-height: 32px;
  }
</style>
